﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/knockout-2.2.1.js"></script>
    <script src="Scripts/knockout.mapping-latest.js"></script>
    <script src="../Math/MathHelper.js"></script>
    <script src="../Math/Vector2.js"></script>
    <script src="../Math/Vector3.js"></script>
    <script src="../Math/Matrix.js"></script>
    <script src="geometry.min.js"></script>

    <style>
        div {
            position: absolute; 
            left:70%; 
            top:0%
        }
        ul * {
            position: relative;
            left: 0%;
        }
    </style>
</head>
<body>
    <canvas width="800px" height="600px" style="border:1px solid black;" id="canvas-id"></canvas>
    <div>        
        <label>Points:</label><input type="number" placeholder="angle" data-bind="value: pointsCount" min="0" max="25" step="1" />
        <ul>
            <li style="color: blue">
                <input type="checkbox" data-bind="checked: showLineSimmetry" />
                Line simmetry
                <br />
                <label>Angle:</label>
                <input type="number" placeholder="angle" data-bind="value: lineSimmetryAngle, attr: { disabled: !showLineSimmetry() }" min="0" max="6.2831" step="0.1" />
            </li>
            <li style="color: #666600">
                <input type="checkbox" data-bind="checked: showMovingReflection" />
                Moving simmetry                
                <br />
                <label>Angle:</label>
                <input type="number" placeholder="angle" data-bind="value: movingReflectionAngle, attr: { disabled: !showMovingReflection() }" min="0" max="6.2831"  step="0.1" />
                <label>Dx:</label>
                <input type="number" placeholder="x" data-bind="value: movingReflectionX, attr: { disabled: !showMovingReflection() }" min="-1" max="1"  step="0.05" />
                <label>Dy:</label>
                <input type="number" placeholder="y" data-bind="value: movingReflectionY, attr: { disabled: !showMovingReflection() }" min="-1" max="1"  step="0.05" />
            </li>
            <li style="color: red">
                <input type="checkbox" data-bind="checked: showRotation" />
                Rotation
                <br />
                <label>Angle:</label>
                <input type="number" placeholder="angle" data-bind="value: rotationAngle, attr: { disabled: !showRotation() }" min="0" max="6.2831"  step="0.1" />
            </li>
            <li style="color: green">
                <input type="checkbox" data-bind="checked: showTranslation" />
                Translation
                <br />
                <label>Dx:</label>
                <input type="number" placeholder="x" data-bind="value: translationX, attr: { disabled: !showTranslation() }" min="-1" max="1"  step="0.05" />
                <label>Dy:</label>
                <input type="number" placeholder="y" data-bind="value: translationY, attr: { disabled: !showTranslation() }" min="-1" max="1"  step="0.05" />
            </li>
        </ul>
    </div>
</body>
</html>
